<%--
  Created by IntelliJ IDEA.
  User: 张余玉珠
  Date: 2025/10/29
  Time: 10:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工信息列表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
        }
    </style>
</head>
<%--引入jquery--%>
<script src="./js/jquery.js"></script>
<body>
<h1>员工信息列表</h1>
<div style="margin-bottom: 10px;">
    <input type="text" id="searchInput" placeholder="请输入姓名进行搜索..." style="padding: 5px; width: 200px;">
    <button onclick="searchEmployee()">搜索</button>
    <a href="addEmp.jsp">添加员工</a>

</div>
<div id="table">
    <table>
        <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>密码</th>
            <th>员工照片</th>
            <th>生日</th>
            <th>薪资</th>
            <th>部门</th>
            <th>入职时间</th>
            <th>更新时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tbody id="tbs">

        </tbody>

    </table>
</div>
</body>
</html>
<%--导入jquery--%>
<script src="./js/jquery.js"></script>
<script>
    /*页面加载*/
    $(function(){
        getEmployeeList(null)
    })
    function getEmployeeList(empname){
    $.ajax({
        url:"/emp.do",
        type:"get",
        data:{
            method:"list",
            empName:empname
        },
        dataType:"json",
        success:function(data){
            console.log("员工列表",data);
            //清空列表
            $("#tbs").empty();
            for (const employee of data){
                let img=employee.image;
                if (img==null||img==""){
                    img="./imgs/640.jpg";
                }
               let start= employee.start=="0"?"在职":"离职";
                let tr=`<tr>
                    <td>`+employee.id+`</td>
                    <td>`+employee.empname+`</td>
                    <td>`+employee.password+`</td>
                    <td><img src="`+img+`" alt=""></td>
                    <td>`+employee.birthday+`</td>
                    <td>`+employee.salary+`</td>
                    <td>`+employee.depld+`</td>
                    <td>`+employee.createTime+`</td>
                    <td>`+employee.updateTime+`</td>
                    <td>`+start+`</td>
                    <td>
                    <a href ="/emp.do?method=edit&id=`+employee.id+`">修改</a>
                    <button onclick="del(`+employee.id+`)">删除</button>
                    </td>
                    <tr>`
                $("#tbs").append(tr)
            }
        }
    })
    }
    //根据员工姓名查询员工列表
    function searchEmployee(){
        //获取输入框
        let empName= $("#searchInput").val();
        getEmployeeList(empName);
    }

    //删除员工
    function del(empId) {
        if (confirm("确定要删除吗？")) {
            $.ajax({
                url: "/emp.do",
                type: "post",
                data: {
                    method: "delete",
                    empId: empId
                },
                dataType: "json",
                success: function (data) {
                    console.log("删除结果：",data);
                    if (data.status) {
                        alert(data.message)
                        //刷新列表
                        getEmployeeList(null);
                    }else {
                        alert(data.message)
                    }
                }
            })
        }
    }

</script>
